import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Form, Input, Modal,  Divider,Card,Switch,Badge,message } from 'antd';
import {Map, Marker, NavigationControl,MapTypeControl,ScaleControl,OverviewMapControl, InfoWindow,TrafficLayer,Road} from 'react-bmap'  ;
import DescriptionList from '../../DescriptionList/index';
import MsgImage from '../MsgImage'
import styles from './index.less';
import MsgModalMap from '../MsgModalMap/index';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Description } = DescriptionList;
message.config({
  top: 100,
  duration: 1.0,
  Bmap:'',
});
//消息来源
const sourceMap = ['来自微信', '来自APP','平台发布','来自webApp'];
//是否审核
const auditMap = ["待审","已审待播","已审已播","导播忽略","主播忽略"];
//消息类型
const messageTypeMap = ['互动','寻人','寻物','车辆求助','寻找失主','其他'];
const bmapCarIcon = require("../../../../public/arrow.png");
let map;
let traffic;
class MsgHuDongDetail extends PureComponent {
  state = {
    replayVisible: false,
    replayMessageValue:"",
    lng:"",
    lat:"",
    drivingDirection:null,
    modalMapVisible:false,
    showTraffic:true
  };
  componentDidMount() {
    var self = this;
    const {selectedRowData} = this.props;
    if(JSON.stringify(selectedRowData) == "{}" || selectedRowData.positionCoor == null || selectedRowData.positionCoor == "" || JSON.stringify(JSON.parse(selectedRowData.positionCoor)) == "{}"){
      return;
    }
    const lng = JSON.parse(selectedRowData.positionCoor).lng ;
    const lat = JSON.parse(selectedRowData.positionCoor).lat ;
    const drivingDirection = selectedRowData.drivingDirection;
    this.setState({
      lng:lng,
      lat:lat,
      drivingDirection:drivingDirection,
    },()=>{
      self.initBmap(lng,lat,drivingDirection);
    });
  }

  componentWillReceiveProps(nextProps){
    var self = this;
    if(nextProps.selectedRowData !== undefined && JSON.stringify(nextProps.selectedRowData) != "{}"){
      const selectedRowData = nextProps.selectedRowData;
      if(selectedRowData.positionCoor == null || selectedRowData.positionCoor == "" || JSON.stringify(JSON.parse(selectedRowData.positionCoor)) == "{}"){
        return;
      }
      const lng = JSON.parse(selectedRowData.positionCoor).lng ;
      const lat = JSON.parse(selectedRowData.positionCoor).lat ;
      const drivingDirection = selectedRowData.drivingDirection;
      this.setState({
        lng:lng,
        lat:lat,
        drivingDirection:drivingDirection,
      },()=>{
        self.initBmap(lng,lat,drivingDirection);
      });
    }
  }
  initBmap(lng,lat,drivingDirection){
    const self = this;
    if(lng == ""){
      return ;
    }
    map = new BMap.Map("msgDetailBmapId");
    map.enableScrollWheelZoom(true);
    var point = new BMap.Point(lng,lat);
    map.centerAndZoom(point, 17);

    map.addEventListener("dblclick", function(){
      self.setState({
        modalMapVisible: true,
      });
    })
    map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    var pt = new BMap.Point(lng, lat);
    var myIcon = new BMap.Icon(bmapCarIcon, new BMap.Size(32,32));
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    if(drivingDirection != null){
      marker2.setRotation(drivingDirection);
    }
    traffic = new BMap.TrafficLayer();
    map.addTileLayer(traffic);
    map.addOverlay(marker2);              // 将标注添加到地图中
  }

  handleCancelBMapModal = () => {
    this.setState({
      modalMapVisible: false,
    });
  }
  /**
   * 打开实时路况
   * @param checked
   */
  openShishiRold = (checked) => {
    if(checked){
      traffic = new BMap.TrafficLayer();
      map.addTileLayer(traffic);
    }else{
      map.removeTileLayer(traffic);
    }
  }

  /**
   * 打开消息回复窗口
   * @param flag
   */
  handleShowReplayModal = (flag) => {
    this.setState({
      replayVisible: !!flag,
    });
  }

  handleReplayMessage = (helpId,userId) => {
    const replayMessageValue = this.state.replayMessageValue;
    if(replayMessageValue == undefined || replayMessageValue == ""){
      message.info("请输入回复消息内容");
      return ;
    }
    this.props.handleReplayMessage(helpId,userId,replayMessageValue);
    this.setState({
      replayVisible: false,
      replayMessageValue:""
    });
  }

  handleChangeReplayMessageValue = (e) => {
      this.setState({
        replayMessageValue: e.target.value,
      });
  }

  render() {
    const { replayVisible, replayMessageValue,lng,lat,drivingDirection,modalMapVisible,showTraffic} = this.state;
    const {selectedRowData} = this.props;
    const showModalMap = (
      <Modal
        visible={modalMapVisible}
        maskClosable={true}
        footer={null}
        onCancel={this.handleCancelBMapModal}
        width={document.body.clientWidth*0.8}
      >
        <MsgModalMap
          lng={lng}
          lat={lat}
          drivingDirection={drivingDirection}
          showTraffic={showTraffic}
        >
        </MsgModalMap>
      </Modal>
    )
    return (
      <div style={{height: "auto"}}>
        <Card bordered={false}>
          <DescriptionList style={{marginBottom: 16}} col={2}>
            <Description term="时间">{selectedRowData.msgTime == null ? "" : moment(selectedRowData.msgTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="审核">
                  <span>{selectedRowData.status==null ? "" : auditMap[selectedRowData.status]}</span>
              {selectedRowData.messageFrom === 3 ? null:
                <Button type="primary" style={{marginLeft: 40}} size="small"
                        onClick={() => this.handleShowReplayModal(true)}>回复消息
                </Button>
              }
            </Description>
            <Description term="类型">{selectedRowData.msgType == null ? "" : messageTypeMap[selectedRowData.msgType]}</Description>
            <Description term="来源">{selectedRowData.messageFrom == null ? "" : sourceMap[selectedRowData.messageFrom]}</Description>
          </DescriptionList>
          <Divider style={{marginBottom: 16}}/>
          <DescriptionList style={{marginBottom: 16}} col={2}>
            <Description term="位置和方向">{selectedRowData.positionName}（双击全屏）</Description>
            <Description term="时速">{selectedRowData.drivingSpeed !==null && selectedRowData.drivingSpeed>0?selectedRowData.drivingSpeed+" 公里/小时":"0.00"+" 公里/小时"}</Description>
            {/*<Description term="实时路况">*/}
              {/*<div>*/}
                {/*<Switch  onChange={this.openShishiRold} defaultChecked/>*/}
              {/*</div>*/}
              {/*<div>*/}
                {/*<Badge status="error" text="拥堵"/>*/}
                {/*<Badge status="warning" text="缓行"/>*/}
                {/*<Badge status="success" text="通常"/>*/}
              {/*</div>*/}
            {/*</Description>*/}
          </DescriptionList>
            {
              (selectedRowData.positionCoor == null || selectedRowData.positionCoor == "") ? (
                <div>
                  <DescriptionList style={{marginTop:40,marginBottom: 5,paddingLeft:110}} col={2}>
                    <Description term=""></Description>
                    <Description term="实时路况">
                      <div>
                        <Switch  onChange={this.openShishiRold} defaultChecked/>
                      </div>
                      <div>
                        <Badge status="error" text="拥堵"/>
                        <Badge status="warning" text="缓行"/>
                        <Badge status="success" text="通常"/>
                      </div>
                    </Description>
                  </DescriptionList>
                  <Card style={{ backgroundColor:"#000",background:  "rgba(0, 0, 0, 0.5)"}}>
                    <Map center={{ lng: 87.490354 ,lat: 43.853289}}
                         zoom="18"
                    >
                      <div style={{width: "100%", height: "100%",position: 'absolute', left: '0px', top: '0px',  backgroundColor:"#000",background: "rgba(0, 0, 0, 0.5)",textAlign:"center"}}>
                        <div style={{color:"#FFFFFF",fontSize:32,position: "absolute",left:"30%", top: "30%"}}><span >暂无位置和方向信息</span></div>
                      </div>
                    </Map>
                  </Card>
                </div>
              ) : (
                <div>
                  <DescriptionList style={{marginTop:40,marginBottom: 5,paddingLeft:110}} col={2}>
                    <Description term=""></Description>
                    <Description term="实时路况">
                      <div>
                        <Switch  onChange={this.openShishiRold} defaultChecked/>
                      </div>
                      <div>
                        <Badge status="error" text="拥堵"/>
                        <Badge status="warning" text="缓行"/>
                        <Badge status="success" text="通常"/>
                      </div>
                    </Description>
                  </DescriptionList>
                <Card >
                  <div id="msgDetailBmapId" style={{width:'100%',height:400}}></div>
                </Card>
                </div>
              )
            }

        </Card>
        <Card bordered={false}>
          <Modal
            title="消息回复"
            visible={replayVisible}
            onOk={() => this.handleReplayMessage(selectedRowData.helpId,selectedRowData.userId)}
            onCancel={() => this.handleShowReplayModal(false)}
            okText="发送"
          >
            <FormItem
              labelCol={{span: 5}}
              wrapperCol={{span: 15}}
              label="描述"
            >
              <TextArea rows={5} placeholder="请输入" onChange={this.handleChangeReplayMessageValue}
                        value={replayMessageValue}/>
            </FormItem>
          </Modal>
        </Card>
        {modalMapVisible?showModalMap:null}
      </div>
    );
  }
}

export default MsgHuDongDetail ;
